<div ng-init="init();" class="kmi-layout-content SMT12-content" ng-class="mode">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'SMT12.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content">
        <!-- 基本資料 data -->
        <div class="kmi-row-fields data">
            <!-- 使用者資料 data_user -->
            <div class="column-item left data_user">
                <img src="image/icons/person.png"></img> 
                <label ng-bind="user_name"></label>
            </div>
            <!-- 環境資料 data_environment -->
            <div class="column-item right data_environment">
                <label ng-bind="('home.env' | translate) + envInfo"></label>
            </div>
        </div>
        <!-- 主要流程 process -->
        <div class="process">
            <div class="process_model" ng-repeat-start="phase in phases"
                ng-click="BackToPhase($index)" ng-class="PhaseStatus($index)">
                <label class="process_item" ng-bind="'SMT12.'+phase | translate" ></label>
            </div>
            <i class="material-icons process_arrowIcons" ng-repeat-end ng-if="!$last">keyboard_arrow_right</i>
        </div>
        <!-- 搜尋掃描欄 qr-code -->
        <div class="kmi-row-fields barcode_content qr-code" id="input_barcode">
            <img src="image/icons/search.png"></img> 
            <!-- <input class="qr-code_input" mdl-barcode="input_barcode(barcode)"/> -->
            <input class="barcode_input value input_plot" readonly="readonly"
                ng-keypress="input_PDA_barcode($event);" ng-model="barcode" hidekeyboard="true" />
            <div class="qr-code_icon" ng-click="QRCodeScanner();">
                <img src="image/icons/QRCode.png">
            </div>
        </div>
        <!-- 主要內容 SMT12_main -->
        <div class="SMT12_main">
            <!-- 工具類型 tool_class   -->
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.tool_type' | translate"></label>
                    <label class="value" ng-bind="'SMT.common.tool_class.t_'+tool_class | translate"></label>
                </div>
            </div>
            <!-- 工具編號 tool_no -->
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.tool_no' | translate"></label>
                    <label class="value" ng-bind="tool_no"></label>
                </div>
            </div>
            <!-- 工具狀態 tool_state -->
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.tool_state' | translate"></label>
                    <label class="value" ng-bind="'SMT.common.state.s_' + tool_state | translate"></label>
                </div>
            </div>
            <!-- 最後送修日期 last_fix_date -->
            <div class="kmi-row-fields main_fields ng_show-sendRepair">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.last_sendRepair_date' | translate"></label>
                    <label class="value" ng-bind="last_fix_date"></label>
                </div>
            </div>
            <!-- 維修完成流程 - 送修日期 -->
            <div class="kmi-row-fields main_fields ng_endRepair_show">
                <div class="column-item">
                    <label class="label main_item init-none " ng-bind="'SMT12.list.sendRepair_date' | translate"></label>
                    <label class="value init-none" ng-bind="sendRepair_date_done"></label>
                </div>
            </div>
            <!-- 壽命上限 life_count -->
            <div class="kmi-row-fields main_fields ng_show-sendRepair">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.life_count_limit' | translate"></label>
                    <label class="value ng_show-sendRepair" ng-bind="life_count"></label>
                </div>
            </div>
            <!-- 維修完成流程 - 送修原因
            <div class="kmi-row-fields main_fields ng_endRepair_show">
                <label class="label main_item init-none" ng-bind = "'SMT12.list.sendRepair_reason' | translate"></label>
                <input class="init-none" ng-bind="reason_desc" ng-click="LoadReason();" readonly="readonly">
                <div class="tip init-none">
                    <i class="material-icons" style="color: #484848;">&#xE5CF;</i>
                </div>
            </div> -->
            <!-- 累計使用 acc_count -->
            <div class="kmi-row-fields main_fields ng_show-sendRepair">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.cumulative_usage_count' | translate"></label>
                    <label class="value" ng-bind="acc_count"></label>
                </div>
            </div>
            <!-- 使用上限 usage_count -->
            <div class="kmi-row-fields main_fields ng_show-sendRepair">
                <div class="column-item">
                    <label class="label main_item init-none" ng-bind="'SMT12.list.usage_count_limit' | translate"></label>
                    <label class="value init-none" ng-bind="usage_count"></label>
                </div>
            </div>
            <!-- 目前使用 actual_count -->
            <div class="kmi-row-fields main_fields ng_show-sendRepair">
                <div class="column-item">
                    <label class="label main_item" ng-bind="'SMT12.list.currently_usage_count' | translate"></label>
                    <label class="value" ng-bind="actual_count"></label>
                </div>
            </div>
        </div>
        <!-- 原因tab -->
        <div class="kmi-tab-content" style="border-bottom:1px #cecece solid;" ng-show="maintain_reason_list && maintain_reason_list.length != 0">
            <div class="tab" ng-click="changeTab('1')" ng-class="{'is-select':reason_index =='1'}">
                <label ng-bind="'SMT12.reason_list.abnormal_reason' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="tab" ng-click="changeTab('2')" ng-class="{'is-select':reason_index =='2'}">
                <label ng-bind="'SMT12.reason_list.repair_reason' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        <!-- 異常原因 SMT12_abnormal_reason-->
        <div class="kmi-list reason_content" ng-show = "maintain_reason_list && maintain_reason_list.length != 0 && reason_index =='1'">
            <!-- 異常項目 sendRepair_item  -->
            <div class="kmi-list__header">
                <div class="kmi-list__column" style="flex: 0 0 40px;" ng-bind="'SMT12.list_repair.index' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT12.abnormal_list.abnormal_no' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT12.abnormal_list.abnormal_reason' | translate"></div>
            </div>
            <!-- 異常項目資料(ng-repeat)  -->
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in maintain_reason_list">
                    <div class="kmi-list__column" style="flex:0 0 40px;" ng-bind="$index+1"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="item.reason_no"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="item.reason_name"></div>
                </div>
            </div>
        </div>
        <!-- 维修方法流程 SMT12_sendRepair -->
        <div class="kmi-list reason_content" ng-hide = "reason_index =='1' || phases_index == 0 ">
            <!-- 維修方法項目 sendRepair_item  -->
            <div class="kmi-list__header">
                <div class="kmi-list__column" style="flex: 0 0 40px;" ng-bind="'SMT12.list_repair.index' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT12.list_repair.reason_name' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT12.list_repair.remark' | translate"></div>
                <div class="kmi-list__column" style="flex: 0 0 32px;">
                    <i class="material-icons sendRepair_greenIcon" ng-click="AddReason();">add</i>
                </div>
            </div>
            <!-- 維修方法項目資料(ng-repeat)  -->
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in item_list">
                    <div class="kmi-list__column" style="flex:0 0 40px;" ng-bind="$index+1"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="item.reason_name"></div>
                    <div class="kmi-list__column column-input" style="flex: 1;">
                        <input ng-model="item.memo"></input>
                    </div>
                    <div class="kmi-list__column" style="flex:0 0 32px;">
                        <i class="material-icons sendRepair_redIcon" ng-click="RemoveReason(item);">remove</i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 關閉按鈕 & 確定按鈕 -->
        <div class="kmi-mobile__btn-content" style="justify-content: space-around; display: flex;">
            <button class="kmi-button__mobile ng_prev" ng-click="back();">
                <label ng-bind="'common.btn.close' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
            <button class="kmi-button__mobile" ng-click="confirm();">
                <label ng-bind="'common.btn.confirm' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
        </div>
    </div>
</div>
